import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:polygon_clipper/polygon_clipper.dart';

main() =>
    runApp(MaterialApp(debugShowCheckedModeBanner: false, home: HomePage()));

// IMAGES
var meatImage = 'https://i2.bvimg.com/688304/995f6a19ac40d3b3.jpg';
var foodImage = 'https://i2.bvimg.com/688304/dad5b58c76757a95.jpg';
var burgerImage = 'https://i2.bvimg.com/688304/f0b6d5a5a6b32396.jpg';
var chickenImage = 'https://i2.bvimg.com/688304/f6af109acfcf4f7f.jpg';
// COLORS
var textYellow = Color(0xFFf6c24d);
var iconYellow = Color(0xFFf4bf47);

var green = Color(0xFF4caf6a);
var greenLight = Color(0xFFd8ebde);

var red = Color(0xFFf36169);
var redLight = Color(0xFFf2dcdf);

var blue = Color(0xFF398bcf);
var blueLight = Color(0xFFc1dbee);

class HomePage extends StatefulWidget {
  @override
  createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  build(context) => Scaffold(
      floatingActionButton: ActionButton(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: AnchorBar(),
      body: Container(
        child: ListView(
          children: [
            SizedBox(height: 16.0),
            CustomAppBar(),
            SizedBox(height: 16.0),
            FoodListview(),
            SizedBox(height: 16.0),
            SelectTypeSection(),
            SizedBox(height: 16.0),
            MenuItemsList()
          ],
        ),
      ));
}

class AnchorBar extends StatelessWidget {
  @override
  build(context) => BottomAppBar(
        child: Container(
          height: 60.0,
          child: Padding(
            padding: EdgeInsets.only(top: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Column(
                  children: [
                    Icon(Icons.home),
                    Text('主页', style: TextStyle(fontSize: 12.0))
                  ],
                ),
                Column(
                  children: [
                    Icon(Icons.search, color: Colors.black45),
                    Text('搜索', style: TextStyle(fontSize: 12.0))
                  ],
                ),
                Container(
                  width: 100.0,
                ),
                Column(
                  children: [
                    Icon(Icons.shop, color: Colors.black45),
                    Text(
                      '收藏',
                      style: TextStyle(fontSize: 12.0),
                    )
                  ],
                ),
                Column(
                  children: [
                    Icon(
                      Icons.shopping_cart,
                      color: Colors.black45,
                    ),
                    Text('餐车', style: TextStyle(fontSize: 12.0))
                  ],
                ),
              ],
            ),
          ),
        ),
      );
}

class ActionButton extends StatelessWidget {
  @override
  build(context) => Container(
        height: 100.0,
        width: 100.0,
        child: ClipPolygon(
          sides: 6,
          child: Container(
            color: iconYellow,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(FontAwesomeIcons.book),
                SizedBox(height: 4.0),
                Text(
                  '菜单',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
                )
              ],
            ),
          ),
        ),
      );
}

class MenuItemsList extends StatelessWidget {
  @override
  build(context) => Padding(
        padding: EdgeInsets.symmetric(horizontal: 8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '热销美食',
              style: TextStyle(fontSize: 22.0, color: Colors.black54),
            ),
            SizedBox(height: 16.0),
            MenuItem(),
            MenuItem(),
          ],
        ),
      );
}

class MenuItem extends StatelessWidget {
  @override
  build(context) => Padding(
        padding: EdgeInsets.only(bottom: 8.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: 100.0,
              width: 100.0,
              child: Image.network(
                burgerImage,
                fit: BoxFit.cover,
              ),
            ),
            SizedBox(
              width: 16.0,
            ),
            Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    decoration: BoxDecoration(
                        color: iconYellow,
                        borderRadius: BorderRadius.circular(4.0)),
                    child: Padding(
                      padding:
                          EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
                      child: Row(
                        children: [
                          Icon(
                            Icons.star,
                            size: 15.0,
                          ),
                          Text('4.5')
                        ],
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 8.0,
                  ),
                  Text(
                    '秘制鸡肉汉堡',
                    style: TextStyle(fontWeight: FontWeight.w600),
                  ),
                  Container(
                      width: 200.0,
                      child: Text(
                        '鸡肉, 酸奶酪, 红椒, 姜末, 蒜泥, ...',
                        style: TextStyle(color: Colors.grey),
                      )),
                ],
              ),
            )
          ],
        ),
      );
}

class SelectTypeSection extends StatelessWidget {
  @override
  build(context) => Padding(
        padding: EdgeInsets.symmetric(horizontal: 8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              height: 92.0,
              width: 124.0,
              color: greenLight,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    FontAwesomeIcons.footballBall,
                    color: green,
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text(
                    '体育商店',
                    style: TextStyle(color: green, fontWeight: FontWeight.w500),
                  )
                ],
              ),
            ),
            Container(
              height: 92.0,
              width: 124.0,
              color: redLight,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    FontAwesomeIcons.solidClock,
                    color: red,
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text(
                    '预定桌位',
                    style: TextStyle(color: red, fontWeight: FontWeight.w500),
                  )
                ],
              ),
            ),
            Container(
              height: 92.0,
              width: 124.0,
              color: blueLight,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    FontAwesomeIcons.solidLaugh,
                    color: blue,
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text(
                    '餐饮设施',
                    style: TextStyle(color: blue, fontWeight: FontWeight.w500),
                  )
                ],
              ),
            ),
          ],
        ),
      );
}

class FoodListview extends StatelessWidget {
  @override
  build(context) => Padding(
        padding: EdgeInsets.only(left: 8.0),
        child: Container(
          height: 160.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
              ItemCard(),
              ItemCard(),
              ItemCard(),
              ItemCard(),
            ],
          ),
        ),
      );
}

class CustomAppBar extends StatelessWidget {
  @override
  build(context) => Padding(
        padding: EdgeInsets.symmetric(horizontal: 8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Icon(
              Icons.grid_on,
              color: Colors.grey,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text(
                  '位置',
                  style: TextStyle(color: Colors.black54),
                ),
                Text(
                  '西湾、卡塔尔',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ],
            )
          ],
        ),
      );
}

class ItemCard extends StatelessWidget {
  @override
  build(context) => Padding(
        padding: EdgeInsets.only(right: 8.0),
        child: Container(
            height: 160.0,
            width: 300.0,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage(meatImage), fit: BoxFit.cover)),
            child: Stack(
              children: [
                Container(
                  height: 160.0,
                  width: 300.0,
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [Colors.black.withOpacity(0.1), Colors.black],
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter)),
                ),
                Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Spacer(),
                      Text(
                        '打七五折哟',
                        style: TextStyle(
                            color: textYellow,
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0,
                            letterSpacing: 1.1),
                      ),
                      Text(
                        '购满三份',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                            letterSpacing: 1.1),
                      ),
                    ],
                  ),
                ),
              ],
            )),
      );
}
